<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container" style="overflow:hidden">
      <el-input clearable  @keyup.enter.native="handleFilter" v-model="listQuery.usersPhone" style="width: 200px;margin-right:20px;margin-top:8px" class="filter-item" :placeholder="$t('feedback.User_phone_number')" >
      </el-input>
      <el-date-picker
          v-model="listQuery.date"
          :start-placeholder="$t('feedback.start_date')"
          :end-placeholder="$t('feedback.End_date')"
          type="datetimerange"
          :placeholder="$t('feedback.Select_date')"
          value-format="timestamp"
          style="margin-right:20px;">
      </el-date-picker>
      <el-select clearable v-model="listQuery.status" :placeholder="$t('feedback.Please_select_the_processing_status')">
        <el-option
          v-for="item in status"
          :key="item.statusId"
          :label="item.name"
          :value="item.statusId">
        </el-option>
      </el-select>
      <el-button  type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('feedback.Find')}}</el-button>
    </div>
      <!--表格 -->
      <el-table :data="list" :element-loading-text="$t('feedback.give_me_time')" v-loading="loading.list" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="index" :label="$t('feedback.Number')"> </el-table-column>
        <el-table-column prop="usersPhone" :label="$t('feedback.User_phone_number')"> </el-table-column>
        <el-table-column prop="nickName" :label="$t('feedback.User_Nickname')"> </el-table-column>
        <!-- <el-table-column prop="usersPhone" label="手机号/邮箱"> </el-table-column> -->
        <el-table-column prop="context" :label="$t('feedback.Feedback_content')"> </el-table-column>
        <!-- <el-table-column label="图片">
          <template slot-scope="scope">
              <el-button type='text' @click='viewImgList(scope.row.feedbackUrl)'>查看</el-button>
          </template>
        </el-table-column> -->
        <el-table-column prop='cTime' :label="$t('feedback.Feedback_time')"> 
          <template slot-scope="scope">
            {{scope.row.ctime }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('feedback.Processing_status')" prop='status'> 
          <template slot-scope="scope">
            {{scope.row.status == 1 ? $t('feedback.Unprocessed') : $t('feedback.Processed')}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('feedback.operating')">
            <template slot-scope="scope">
                <router-link :to="{name:'feedback_detail',query:{feedbackId:scope.row.feedbackId}}">
              <el-button  size="mini" type="primary">{{$t('feedback.View')}}</el-button>
            </router-link>  
              <router-link :to="{name:'feedback_list',query:{feedbackId:scope.row.feedbackId}}" v-if="scope.row.status==1">
                <el-button @click="handle(scope.row.feedbackId)" style="margin-top:10px">{{$t('feedback.deal_with')}}</el-button>
              </router-link>
            </template> 
        </el-table-column>
      </el-table>
      <!-- pagination 分页 -->
      <div class="pagination-container">
        <el-pagination 
        background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="listQuery.pageNo" 
        :page-sizes="[10, 20, 30, 40]" 
        :page-size="listQuery.pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total">
        </el-pagination>
    </div>
    <!-- dialog 查看图片弹窗 -->
    <el-dialog :title="$t('feedback.Feedback_details')" :visible.sync="dialog.view">
       <el-carousel type="card" trigger="click" height="150px">
        <el-carousel-item v-for="item in imgList" :key="item">
          <img :src="item" style="max-height:500px;width:400px;">
        </el-carousel-item>
      </el-carousel>    
    </el-dialog>
    <!-- 回到顶部 -->
    <BackToTop></BackToTop>
  </div>
</template>
<script>
import { getFeedbackList , upFeedback } from '@/api/feedback'
import { parseTime } from '@/utils/index'
import BackToTop from '@/components/BackToTop'
export default {
  name: 'feedback_list',
  components: {
    BackToTop
  },
  data() {
    return {
      loading: {
        list: false
      },
      dialog: {
        view: false,
      },
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        usersPhone: '',
        contactWay: '',
        date:'',
        status:'',
      },
      status:[
        {statusId:1,name:this.$t('feedback.Unprocessed')},
        {statusId:2,name:this.$t('feedback.Processed')}
      ],     
      list:null,
      title:[
        {title:this.$t('feedback.Equipment_problem')},
        {title:this.$t('feedback.Pay_problem')},
        {title:this.$t('feedback.Other_problem')}
      ],
      imgList:[],
      value: ''
    }
  },
 
  created() {
    this.getList()
  },
  methods: {
    // 查看图片
     viewImgList (imgs) {
      console.log(imgs)
      imgs = imgs || ''
      this.imgList = imgs.split(',')
      this.dialog.view = true
    },
    //点击处理按钮
     async handle(feedbackId) {
       const {data} = await upFeedback({
         feedbackId
       })
       this.getList()
     },
    //获取反馈列表
    async getList() {
      this.loading.list = true
      try {
        let { date, ...other } = this.listQuery
        let [startTime, endTime] = date ? date : []
        let query = {...other, startTime, endTime}
        const { data } = await getFeedbackList(query)
        //循环解析时间
        for(var i = 0; i<data.records.length;i++)
        {
          data.records[i].ctime = parseTime(data.records[i].ctime)
        }
        this.list = data.records.map((item, index) => ({index: index + 1, ...item}))
        // this.list.ctime = this.parseTime(this.list.ctime)
        this.total = data.total
      } catch (error) {       
      }
      this.loading.list = false     
    },
    // //点击tab切换
    // handleClick(tab,index) {
    //     this.listQuery.feedbackType = Number(tab.index)+1
    //     this.getList()
    // },
    //点击查找
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
      // console.log('start',this.listQuery.date[0])
      // console.log('end',this.listQuery.date[1])
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
  }
}
</script>
<style lang="scss" scoped>
  /deep/   .el-carousel__container{
  height:500px !important;
}
  
</style>
